<template class="firstpage">
  <div>
    <div class="boxMargin">

      <el-card class="box-card">

        <el-row class="margin" :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">标题：</el-col>
              <el-col :span="14">
                <el-input
                  v-model="seachData.slideshowTitle"
                  placeholder="请输入标题"
                />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">是否发布：</el-col>
              <el-col :span="14">
                <el-select v-model="seachData.status" placeholder="请选择">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.status"
                    :label="item.label"
                    :value="item.status"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">类别：</el-col>
              <el-col :span="14">
                <el-select v-model="seachData.slideshowType" placeholder="请选择">
                  <el-option
                    v-for="item in slideshowTypeOptions"
                    :key="item.slideshowType"
                    :label="item.label"
                    :value="item.slideshowType"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>

        </el-row>
        <el-row class="margin">
          <el-col :span="24" class="right">
            <el-button type="success" @click="seachListFn">查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="boxMargin">
      <el-card class="box-card">
        <div slot="header">
          <div class="contion-header" style="width: 10%">
            <span>轮播图列表</span>
          </div>
          <div class="contion-header text-r" style="width: 89%">
            <el-button type="primary" @click.native="onAddCourseFn">新增</el-button>
          </div>
        </div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{'background':'#f8f8f9'}"
          border
        >

          <el-table-column prop="createUser" label="轮播图">
            <template slot-scope="scope">
              <div v-if="scope.row.slideshowFile != undefined && scope.row.slideshowFile != null && scope.row.slideshowFile != ''" class="display-img">
                <img :src="scope.row.slideshowFile" alt="" style="width: 100%;height: 100%;">
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="slideshowType" label="类别">
            <template slot-scope="scope">
              <span>{{ slideshowTypeOptions[scope.row.slideshowType].label }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="slideshowTitle" label="标题" />
          <el-table-column prop="slideshowSort" label="排序" />
          <el-table-column prop="status" label="是否发布">
            <template slot-scope="scope">
              <span v-if="scope.row.status ==2">发布</span>
              <span v-else>待审核</span>
            </template>
          </el-table-column>
          <el-table-column prop="createUser" label="创建人" />
          <el-table-column prop="createTimeStr" label="创建时间" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click.native="onUpdateFn(scope.row.id)">编辑</el-button>
              <el-button type="text" @click.native="deletFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </div>
    <div class="marginTop20 center">
      <template>
        <PAGER ref="wptxPager" @search="onChangePage" />
      </template>
    </div>
    <div>
      <addCarouse ref="addCarouseDilog" />
    </div>
  </div>
</template>
<script>
import _validate from '@/framework/commonJs/wptx_validate'
import addCarouse from '../addCarouse'
import _api from '@/framework/API/carouse'
import { PAGER } from '@/framework/commonTemplate/'
export default {
  components: { addCarouse, PAGER },
  filters: {},
  data() {
    return {
      seachData: {
        slideshowTitle: '',
        status: '',
        slideshowType: ''
      },

      tableData: [],
      slideshowTypeOptions: [
        {
          slideshowType: 0,
          label: '图片'
        },
        {
          slideshowType: 1,
          label: '商品'
        },
        {
          slideshowType: 2,
          label: '营销'
        }
      ],
      statusOptions: [

        {
          status: 1,
          label: '待审核'
        },
        {
          status: 2,
          label: '发布'
        }
      ],
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      }

    }
  },
  computed: {},
  watch: {

  },
  created() { },
  mounted() {
    this.seachListFn()
  },
  beforeDestroy() { },
  methods: {
    onReset() {
      this.seachData.slideshowTitle = ''
      this.seachData.slideshowType = ''
      this.seachData.status = ''
      this.seachListFn()
    },
    isSwitchFn(row) {
      console.log(row)
    },
    onAddCourseFn() {
      this.$refs.addCarouseDilog.initFn()
    },
    // 列表
    seachListFn() {
      const self = this
      const params = self.seachData
      _api.getSlideshowPage(self, self.$refs.wptxPager.pageData, self.callBack_getSlideshowPage, params)
    },
    callBack_getSlideshowPage(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        _validate.openTip(self, '查询成功', 'success')
        self.tableData = data.result
        self.$refs.wptxPager.updatePageData(data)
      }
    },
    onChangePage(data) {
      const self = this
      const params = self.seachData
      _api.getSlideshowPage(self, self.$refs.wptxPager.pageData, self.callBack_getSlideshowPage, params)
    },

    // 编辑
    onUpdateFn(id) {
      this.$refs.addCarouseDilog.initFn(id)
    },
    // 删除
    deletFn(id) {
      const self = this
      const params = {
        id: id
      }
      _api.slideshowDelet(self, params, self.callBack_deletPage)
    },
    callBack_deletPage(data) {
      const self = this
      self.seachListFn()
    }

  }

}
</script>
  <style lang="scss" scoped>
  .contion-header {
    display: inline-block;
    box-sizing: border-box;
  }
  .text-r {
    text-align: right;
  }
  .tree-div {
    position: absolute;
    height: auto;

    z-index: 10;
    overflow-y: scroll;
    width: 58%;
    background: #eee;
  }
  .tree {
    max-height: 200px;

    background: #eee;
  }
  .el-card {
    overflow: visible;
  }
  .display-img {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    text-align: center;
  }
  </style>
